import React, { useState, useEffect } from 'react';
import { Button, Drawer, Form, Input, Cascader } from 'antd'
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};
export default function addGoods(props) {
    console.log(props);
    const [visible, setVisible] = useState(false);
    const addDrawer = () => {
        setVisible(true);
    };
  
    const addClose = () => {
        setVisible(false);
    };
    const formRef = React.createRef();
    
    const onFinish = (values) => {
        console.log(values);
    };
    const onReset = () => {
        formRef.current.resetFields();
    };
 
    const ontypeChange = (file, value) => {
        console.log(file, value);
    }
    return (
        <div>
            <Button style={{ margin: "20px" }} type="primary"
                onClick={addDrawer}>新增</Button>
            <Drawer title="新增商品" placement="right" width="500px"
                onClose={addClose} visible={visible}>
                <Form {...layout} ref={formRef} name="control-ref" onFinish={onFinish}>
                    <Form.Item name="note" label="商品名称"  rules={[{ required: true,},]} ><Input />
                    </Form.Item>
                    <Form.Item name="note"
                        label="商品类型" rules={[{required: true,},]}>
                    <Cascader options={props.goodstypelist} fieldNames={{ label: "text", value: 'title', children: 'children' }} onChange={ontypeChange} />

                    </Form.Item>
                   
                    <Form.Item> </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            取消
                        </Button>
                        
                    </Form.Item>
                </Form>
            </Drawer>
            <Button>删除</Button>
        </div>
    )
}
